<template>
   <div class="content">
    <div class="wrap">
      <!-- 手机部分开始 -->
      <div class="phone">
        <h3 class="title">{{typename}}</h3>
        <div class="phone-box">
          <div class="phone-box-left">
            <a href="#"><img :src="mainImageUrl" alt="" width="100%" height="100%"></a>
          </div>
          <div class="phone-box-right">
            <div class="item" v-for="item in goodsList" :key="item.gid">
              <router-link :to="`/goodsdetail?goodsid=${item.gid}`" class="detail-link">
              <a href="#">
                <img :src="`../../../public/images/${item.img}`" alt="" class="item-img">
                <p class="item-name">{{ item.gname }}</p>
                <p class="itme-decs">{{ item.introduce }}</p>
                <p class="item-price">{{item.price}}</p>
              </a>
              </router-link>
            </div>
          </div>
        </div>
        <div class="big-img">
          <a href="#"><img src="../../../public/images/phone_ad.jpg" alt=""></a>
        </div>
      </div>
      <!-- 手机部分结束 -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from '../../api/axios'
const goodsList = ref([]);
const typename = ref('');
const mainImageUrl = ref(''); // 新增主图URL

const props = defineProps({
    type: String
});
axios.post('/api/goods/catebyid', { cgid: props.type }).then(res => {
    console.log('Category response:', res.data); // 添加调试信息
    typename.value = res.data.category.cgname;
    //console.log(typename.value)
    if(props.type == 1){
        mainImageUrl.value = '../../../public/images/15系列.webp'
    }else if(props.type == 2){

    }else if(props.type == 3){

    }else if(props.type == 4){
      mainImageUrl.value = '../../../public/images/Xiaomi Pad 6S Pro 12.4.webp'
    }else if(props.type == 5){
      mainImageUrl.value = '../../../public/images/xiaomiwatchs4.webp'
    }
}).catch(error => {
    console.error('Error fetching category:', error); // 捕获并打印错误信息
});
axios.post('/api/goods/goodslist', { cgid: props.type }).then((res) => {
  //console.log('Goods list response:', res.data); // 添加调试信息
    goodsList.value = res.data.goods;
    //console.log(goodsList.value)
}).catch(error => {
    console.error('Error fetching goods list:', error); // 捕获并打印错误信息
})
</script>




<style lang="scss" scoped>
/* 新鲜好物 */
.goods .bd ul {
    display: flex;
    justify-content: space-between;
}

.goods .bd li {
    width: 304px;
    height: 404px;
    background-color: #EEF9F4;
    display: block;
}

.goods .bd li .pic {
    width: 304px;
    height: 304px;
}

.goods .bd li .txt {
    text-align: center;
}

.goods .bd li h4 {
    margin-top: 17px;
    margin-bottom: 8px;
    font-size: 20px;
}

.goods .bd li p {
    font-size: 18px;
    color: #AA2113;
}

.goods .bd li p span {
    font-size: 22px;
}
.itme-decs{
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 隐藏溢出内容 */
  text-overflow: ellipsis;  /* 显示省略号 */
  width: 100%;              /* 需指定宽度 */
}
</style>